<template>
	<view>
		<view :class="item.templateCode === 'golden'?'coupon-box-golden':'coupon-box-red'" v-for="(item,index) in couponList" :key="index">
			<view class="left-box">
				<view>
					<span class="amount-prefix">¥</span>
					<span class="amount">{{ item.amount }}</span>
				</view>
				<text class="attach" v-if="item.minPoint">满{{ item.minPoint }}元可用</text>
				<text class="attach" v-else>无门槛</text>
			</view>
			<view class="right-box">
				<span class="name">
					{{ item.name }}
				</span>
				<view class="coupon-footer">
					<view class="coupon-date">
						{{ moment(item.startTime).format('YYYY.MM.DD') }} ~ {{ moment(item.endTime).format('YYYY.MM.DD') }}
					</view>
					<view class="receive-btn" @tap="receive(item.id)">
						点击领取
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import moment from 'moment'
	export default {
		props: {spuId: String},
		data() {
			return {
				couponList: []
			}
		},
		created() {
			this.loadData()
		},
		methods: {
			moment,
			loadData() {
				$http.request({
					url: `/coupon/coupon/find`,
          loading: true
				}).then(res => {
					if(res.success) {
						this.couponList = res.data.records
					}
				})
			},
			receive(id) {
				$http.request({
					url: `/coupon/coupon/receive/${id}`,
          loading: true,
          loadingText: '正在领取优惠券'
				}).then(res => {
					if(res.success) {
						uni.showToast({
							icon: 'none',
							title: '领取成功，快去使用吧~',
							duration: 1000
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message,
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.coupon-box-golden {
		margin: 0 auto;
		height: 180rpx;
		margin-top: 30rpx;
		width: 95%;
		box-shadow: 0 0 10px #EDEDED;
		border-left: #DFB674 2rpx dotted;
		display: flex;

		.left-box {
			background-color: #E6B872;
			height: 100%;
			width: 110px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.amount {
				color: white;
				font-weight: 600;
				font-size: 30px;
			}

			.attach {
				display: inline;
				color: #FFF;
				font-size: 26rpx;
			}

			.amount-prefix {
				color: white;
				font-weight: 600;
				font-size: 16px;
			}
		}

		.right-box {
			flex: 1;
			padding: 5px;
			font-size: 12px;
			line-height: 16px;
			color: #000;
			position: relative;

			.name {
				display: inline-block;
				margin-top: 30rpx;
				font-size: 26rpx;
				font-weight: 600;
			}

			.coupon-footer {
				position: absolute;
				bottom: 0;
				font-size: 10px;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				width: 90%;
				/* 确保父元素宽度为 100% */

				.coupon-date {}

				.receive-btn {
					align-self: center;
					background-color: #DFB674;
					height: 20px;
					color: white;
					padding: 0 10px;
					text-align: center;
					line-height: 20px;
					border-radius: 10px;
				}
			}
		}
	}


	.coupon-box-red {
		margin: 0 auto;
		height: 180rpx;
		margin-top: 30rpx;
		width: 95%;
		box-shadow: 0 0 10px #EDEDED;
		border-left: #FF4C42 2rpx dotted;
		display: flex;

		.left-box {
			background-color: #FF4C42;
			height: 100%;
			width: 110px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.amount {
				color: white;
				font-weight: 600;
				font-size: 30px;
			}

			.attach {
				display: inline;
				color: #FFF;
				font-size: 26rpx;
			}

			.amount-prefix {
				color: white;
				font-weight: 600;
				font-size: 16px;
			}
		}

		.right-box {
			flex: 1;
			padding: 5px;
			font-size: 12px;
			line-height: 16px;
			color: #000;
			position: relative;

			.name {
				display: inline-block;
				margin-top: 30rpx;
				font-size: 26rpx;
				font-weight: 600;
			}

			.coupon-footer {
				position: absolute;
				bottom: 0;
				font-size: 10px;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				width: 90%;
				/* 确保父元素宽度为 100% */

				.coupon-date {}

				.receive-btn {
					align-self: center;
					background-color: #FF4C42;
					height: 20px;
					color: white;
					padding: 0 10px;
					text-align: center;
					line-height: 20px;
					border-radius: 10px;
				}
			}
		}


	}
</style>
